<template>
  <view :style="{width}"
        class="cardWrap">
    <!-- 头部 -->
    <div class="uni-flex  cardHeadea">
      <view class="cardItemTitle">{{tit?tit:''}}</view>
      <view class="cardItemSubtitle">
        <p>{{subTit?subTit:''}}</p>
      </view>
    </div>
    <!-- 中间 -->
    <slot name="container"></slot>
    <!-- 脚脚 -->
    <div class="cardFooter"><a :href="link"
         class="more">{{footerInfo?footerInfo:''}}</a></div>
  </view>
</template>


<script>
/** 
 * <Card class="activeWrap"
            width='95%'
            tit="社区活动"
            footerInfo="查看更多活动   >"
            subTit="·   好吃好喝好玩的都到这">
        <div name="container">
            ...
        </div>
    </Card>
 */
export default {
  props: {
    tit: "",
    subTit: '',
    footerInfo: '',
    link: '',
    width: {
      default: '100%',
    }
  }
}
</script>

<style lang="scss" scoped>
.cardWrap {
  background-color: #ffffff;
  margin: 32rpx auto 32rpx;
  padding: 24rpx;
  box-shadow: 4rpx 12rpx 17rpx 0rpx rgba(3, 101, 85, 0.13);
  border-radius: 8rpx;
  overflow: hidden;

  // 头部
  .cardHeadea {
    .cardItemTitle {
      width: 130rpx;
      height: 30rpx;
      font-size: 30rpx;
      font-family: PingFang;
      font-weight: bold;
      color: #525252;
    }
    .cardItemSubtitle {
      // width: 243rpx;
      height: 22rpx;
      font-size: 22rpx;
      font-family: PingFang;
      font-weight: bold;
      color: #6e848f;
    }
  }

  .cardFooter {
    .more {
      text-decoration: none;
      font-size: 16rpx;
      font-family: PingFang;
      font-weight: 500;
      color: #58aefd;
    }
  }
}
</style>